import 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'; //引入jquery模块
import 'https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js';//引入jquery懒加载插件
import './jquery.pagination.js';

class Mylist{
    constructor(){

    }
    init(){
        this.lazy();
    }
    lazy(){

        function ren(resData){
            let htmlStr = ""; 
            $.each(resData,function(index,value){
              
                        htmlStr +=
                        `
                        <a href="http://localhost/my-wangyi/frontend/detail.html?sid=${value.sid}">
                        <dl>
                        <dt><img data-original="${value.url}" class="lazy" alt=""></dt>
                        <dd class="dd1">${value.title}</dd>
                        <dd class="dd2">￥${value.price}</dd>
                        </dl>
                        </a>
                        `;

            });
            htmlStr ='<div class="mods1 clear">'+ htmlStr+'</div>'
            $('#mmms').html(htmlStr);
            $("img.lazy").lazyload({
            //   effect : "slideDown"
            });
        }
        $.ajax({
            url:'http://localhost/my-wangyi/backend/list.php',
            dataType:'json'
          }).then(function(resData){
            console.log(resData);
            let arrData = resData.pagecontent;
            ren(arrData);

            $('.page').pagination({
                pageCount: resData.pagesize,//总页数
                jump: true,//是否开启跳转到指定页数，值为boolean类型
                coping: true,//是否开启首页和末页，值为boolean
                homePage: '首页',
                endPage: '末页',
                prevContent: '上页',
                nextContent: '下页',
                callback: function (api) {
                    console.log(api.getCurrent());//获取当前点击的分页的页面
                    $.ajax({
                      url:'http://localhost/my-wangyi/backend/list.php',
                      data:{
                        page:api.getCurrent()
                      },
                      dataType:'json'
                    }).then(function(resData){
                      let arrData = resData.pagecontent;
                      ren(arrData);
                    })
                }
            });



            $('#sx').eq(0).on('click',function(){
                $('.page').pagination({
                  pageCount: resData.pagesize,//总页数
                  jump: true,//是否开启跳转到指定页数，值为boolean类型
                  coping: true,//是否开启首页和末页，值为boolean
                  homePage: '首页',
                  endPage: '末页',
                  prevContent: '上页',
                  nextContent: '下页',
                  callback: function (api) {
                      console.log(api.getCurrent());//获取当前点击的分页的页面
                      $.ajax({
                        url:'http://localhost/my-wangyi/backend/list.php',
                        data:{//后续的每一页都是排序好的
                          page:api.getCurrent(),
                          sort:'asc'
                        },
                        dataType:'json'
                      }).then(function(resData){
                        let arrData = resData.pagecontent;
                        ren(arrData);
                      })
                  }
              });
        
                $.ajax({
                  url:'http://localhost/my-wangyi/backend/list.php',
                  data:{//回到第一页，第一个开始进行升序排列
                    page:1,
                    sort:'asc'
                  },
                  dataType:'json'
                }).then(function(resData){
                  let arrData = resData.pagecontent;
                  ren(arrData);
                })
              })


              //降序
              $('#jx').eq(0).on('click',function(){
                $('.page').pagination({
                  pageCount: resData.pagesize,//总页数
                  jump: true,//是否开启跳转到指定页数，值为boolean类型
                  coping: true,//是否开启首页和末页，值为boolean
                  homePage: '首页',
                  endPage: '末页',
                  prevContent: '上页',
                  nextContent: '下页',
                  callback: function (api) {
                      console.log(api.getCurrent());//获取当前点击的分页的页面
                      $.ajax({
                        url:'http://localhost/my-wangyi/backend/list.php',
                        data:{//后续的每一页都是排序好的
                          page:api.getCurrent(),
                          sort:'ddd'
                        },
                        dataType:'json'
                      }).then(function(resData){
                        let arrData = resData.pagecontent;
                        ren(arrData);
                      })
                  }
              });
        
                $.ajax({
                  url:'http://localhost/my-wangyi/backend/list.php',
                  data:{//回到第一页，第一个开始进行升序排列
                    page:1,
                    sort:'ddd'
                  },
                  dataType:'json'
                }).then(function(resData){
                  let arrData = resData.pagecontent;
                  ren(arrData);
                })
              })


              //默认
              $('#mr').eq(0).on('click',function(){
                $('.page').pagination({
                  pageCount: resData.pagesize,//总页数
                  jump: true,//是否开启跳转到指定页数，值为boolean类型
                  coping: true,//是否开启首页和末页，值为boolean
                  homePage: '首页',
                  endPage: '末页',
                  prevContent: '上页',
                  nextContent: '下页',
                  callback: function (api) {
                      console.log(api.getCurrent());//获取当前点击的分页的页面
                      $.ajax({
                        url:'http://localhost/my-wangyi/backend/list.php',
                        data:{//后续的每一页都是排序好的
                          page:api.getCurrent(),
                          
                        },
                        dataType:'json'
                      }).then(function(resData){
                        let arrData = resData.pagecontent;
                        ren(arrData);
                      })
                  }
              });
        
                $.ajax({
                  url:'http://localhost/my-wangyi/backend/list.php',
                  data:{//回到第一页，第一个开始进行升序排列
                    page:1,
                    
                  },
                  dataType:'json'
                }).then(function(resData){
                  let arrData = resData.pagecontent;
                  ren(arrData);
                })
              })
        

      
          });
    }
}
export{
    Mylist
}